<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>所有课程</title>
	<style>
		.course_table{
			width:560px;
			text-align: center;
			margin: 0 auto;
			border: black solid 1px;
			border-collapse:collapse;
		}
		.course_table tr th,.course_table tr td{
			width:114px;
			border: black solid 1px;
		}
		.query{
			width: 500px;
			height: 100px;
			margin:0 auto;
		}
		.input{
			margin: 30px;
		}
		#btn{
			margin: 30px;
		}
		.normal_btn{
			float: left;
			margin: 13px 0px 0px 460px;
			height: 42px;
			width: 100px;
			border: none;
			font-weight: bold;
			background-color: #ff812b;
			text-align: center;
			color: #fff;
			font-size: 20px;
			font-family: "Microsoft YaHei";
			cursor: pointer;
		}
		.table_in_input,.tcb,.mcb{
			border: none;
			display: block;
			width: 114px;
			text-align: center;
		}
		
		.display_none{
			display: none;
		}
		.display_block{
			display: block;
		}
		.btn_container{
			width: 566px;
			height: 60px;
			margin:0 auto;
		}
</style>
	<%@ include file= "index_nav.jsp" %>
</head>
<body>
	<!-- <form action="/webstuinfo/LoginServlet" method="GET" class="query">
		<input type="text" name="condition" class="input" id="input">
		<button id="btn">查询</button>
	</form> -->
	<div  class="query">
		<input type="text"  name="condition"
		class="input" id="input" placeholder="请输入查询条件" size="23">
		<button id="btn">查询</button>
	</div>
	<div class="btn_container">
		<button id="delete_btn" class="normal_btn">删除</button>
	</div>
	<table class="course_table">
		<tr>
			<th>课程名称</th>
			<th>任教老师</th>
			<th>学分</th>
			<th>总课时</th>
			<th>专业</th>
			<th>最大选课人数</th>
			<th width="40px">选择</th>
		</tr>
		<c:forEach var="course" items="${datas}" varStatus="outStatus">
			<tr row="${outStatus.index}" class="symbol">
				<td>
					<input type="text" class="table_in_input" readonly='true' value="${course.cname}"/>
				</td>
				<td>
					<select class="tcb">
						<c:forEach var="teacher" items="${teachers}" varStatus="trow">
							<c:choose>
								<c:when test="${teacher.tid==course.teacher.tid}">
									<option selected value="${teacher.tname}" tid="${teacher.tid}">${teacher.tname}</option>
								</c:when>
								<c:otherwise>
									<option value="${teacher.tname}" tid="${teacher.tid}">${teacher.tname}</option>
								</c:otherwise>
							</c:choose>
						</c:forEach>
					</select>
					
				</td>
				
				<td>
					<input type="text" class="table_in_input" readonly='true' value="${course.credit}"/>
				</td>
				
				<td >
					<input type="text" class="table_in_input" readonly='true' value="${course.chour}"/>
				
				</td>
				<td>
					<select class="mcb">
						<c:forEach var="major" items="${majors}" varStatus="trow">
							<c:choose>
								<c:when test="${course.major.major_id==major.major_id}">
									<option selected value="${major.major_name}" major_id="${major.major_id}">${major.major_name}</option>
								</c:when>
								<c:otherwise>
									<option value="${major.major_name}" major_id="${major.major_id}">${major.major_name}</option>
								</c:otherwise>
							</c:choose>
						</c:forEach>
						</select>
				</td>
				<td>
					<input type="text" class="table_in_input" readonly='true' value="${course.max_people}"/>
				
				</td>
				<td><input type="checkbox" cid="${course.cid}"/></td>
			</tr>
		</c:forEach>
		
	</table>
	
</body>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-3.2.1.min.js"></script>
<script type="text/javascript">

	(function() {
		
		var queryCourse = function() {
			$.ajax({
				url : "/admin/list_course?condition="+$('#input').val(),
				type : 'get',
				/*dataType : "text",*/
				success : function(data) {
				    console.log(data);
				    //console.log(data);
				   /* console.log(data);
                    updateTable(data);
                    bindAction();*/
				}
			});
		};
        bindAction();
		$("#input").bind('change', queryCourse);
		$("#btn").bind('click', queryCourse);
		$('.table_in_input').mousedown(function (event) {
            event = event ? event : window.event;
            var target = event.target ? event.target : event.srcElement;
            $(target).attr('readonly','true');
        })
        function sendReq(){
            var oldContent = $(this).val();
            if(confirm("确定修改?")){
                var msg={};

                var currentTr = $(this).closest('tr');

                var cid = currentTr.find(':checkbox').attr('cid');

                var cname = currentTr.find('.table_in_input').eq(0).val();
                var credit = currentTr.find('.table_in_input').eq(1).val();
                var chour = currentTr.find('.table_in_input').eq(2).val();
                var max_people = currentTr.find('.table_in_input').eq(3).val();
                var tid = currentTr.find('option:selected').eq(0).attr('tid');
                var major_id = currentTr.find('option:selected').eq(1).attr('major_id');

                msg.cid=cid;
                msg.credit=credit;
                msg.cname=cname;
                msg.chour=chour;
                msg.max_people=max_people;
                msg.major_id=major_id;
                msg.tid=tid;
                console.log(JSON.stringify(msg));
                $.ajax({
                    url : "${pageContext.request.contextPath}/admin/alter_course",
                    type : 'post',
                    data:msg,

                    dataType : "text",
                    success : function(data) {

                        if(data=='success'){

                            alert('修改成功!');

                        }
                        else {
                            alert('修改失败!');

                        }
                    }

                });
            }
            else{
                window.location.reload();
            }
        }
		function bindAction() {
			//修改课程

            $('.table_in_input').dblclick(function (event) {
                event = event ? event : window.event;
                var target = event.target ? event.target : event.srcElement;
                $(target).attr('readonly',false);
            });
            $('.mcb').change(sendReq);
            $('.tcb').change(sendReq);
            $('.table_in_input').change(sendReq);
        }
		
        function updateTable(data) {
            $('.symbol').remove();
            eval("var o=" + data + "");
            for (var i = 0; i < o.length; i++) {
                var tempNode = $("<tr class='symbol' row=''></tr>");
                $(tempNode).attr('row',i);
                for (var j = 0; j < o[i].length; j++) {
                    tempNode.append("<td>" + "<input class='table_in_input' readonly='true' type='text' value='" +o[i][j]+
                        "'>" + "</td>") 
                }
                tempNode.append("<td><input type='checkbox'class='check_cid'/></td>");
                $(".course_table").append(tempNode);
            }
        }

		var isManChecked = function () {
            var t=$(':radio');
            t.each(function () {
                if($(this).prop('checked')&&$(this).attr('id')=='boy'){
					return true;
                }
                return false;
            })
        }
		//删除课程
        $('#delete_btn').click(function () {
            var target = $('.course_table :checkbox');


            var checkValue = new Array();
          	target.each(function () {
				if($(this).prop('checked')==true){
                  
                    var cid = $(this).attr('cid');
					checkValue.push(cid);
				}
            });
			var urlValue = '?';
			for (var i=0;i<checkValue.length;i++){
			    if(i!=checkValue.length-1){
                    urlValue+='cid='+checkValue[i]+'&';
                }
                else {
                    urlValue+='cid='+checkValue[i];
                }
			}
			
            var thisObj = $(this);
            var currentTr = $(this).closest('tr');
            var cid = currentTr.eq(0).children().first().val();
            console.log(urlValue);
            $.ajax({
                url : "/admin/delete_course"+urlValue,
                type : 'get',
                dataType : "text",
                success : function(data) {
                	
                    if(data=='success'){
                        target.each(function () {
                            if($(this).prop('checked')==true){
                               $(this).closest('.symbol').remove();
                            }
                        })
                        alert('删除成功!');
					}else {
                        alert('删除失败!');
					}
                }
            });
        }) 
		
		function editableTable() {
            var inputNode = $('<input type="text" class="table_in_input"/>');
            $('.course_table td')	.click(appendInput);
            function appendInput(event){
                event = event ? event : window.event;
                var target = event.target ? event.target : event.srcElement;
                var content = $(target).html();
                $(inputNode).attr('value',content);
                $(target).html("");
                $(target).append(inputNode);
                $(target).unbind('click',appendInput);
            }
            $('.course_table td  :input[text]').change(function (event) {
                console.log(event);
                event = event ? event : window.event;
                var target = event.target ? event.target : event.srcElement;
                var content = $(target).attr('value');
                console.log(content);
                $(target).remove();
                $(target).parent().val(content);
            });
        }
	})();
</script>
</html>